<template>
	<div>
		<div class="info-content">
			<el-row class="info-content-row">
				<el-col :span="24" style="display:flex">
					<span>{{ $t('common.components.virtual_address') }}：</span>
					<span style="flex:1">
						{{
							showInfoData.virtualAddress
								? showInfoData.virtualAddress
								: '-'
						}}
					</span>
				</el-col>
			</el-row>
			<el-row class="info-content-row">
				<el-col :span="8">
					<span>{{ $t('common.components.virtual_type') }}：</span>
					<span>
						{{
							showInfoData.virtualKind
								? showInfoData.virtualKind
								: '-'
						}}
					</span>
				</el-col>
				<el-col :span="8">
					<span>{{ $t('common.components.protocol_type') }}：</span>
					<span v-if="showInfoData.virtualProtocol">
						{{ showInfoData.virtualProtocol }}
					</span>
					<span v-else>-</span>
				</el-col>
				<el-col :span="8">
					<span>{{ $t('common.components.black_status') }}：</span>
					<span
						v-if="
							showInfoData.bindStatus &&
								showInfoData.bindStatus * 1 === 1
						"
						class="normalRgba"
					>
						{{ $t('common.components.binding') }}
					</span>
					<span
						v-else-if="showInfoData.bindStatus + '' === '0'"
						class="disableRgba"
					>
						{{ $t('common.components.wait_bind') }}
					</span>
					<span v-else>-</span>
				</el-col>
			</el-row>
			<el-row class="info-content-row">
				<el-col :span="8">
					<span>{{ $t('common.components.bind_count') }}：</span>
					<span>
						{{ showInfoData.bindNum ? showInfoData.bindNum : '-' }}
					</span>
				</el-col>
				<el-col :span="8">
					<span>{{ $t('common.withdraw_total') }}：</span>
					<span>
						{{ showInfoData.withdrawalTotalAmount }}
					</span>
				</el-col>
				<el-col :span="8">
					<span>{{ $t('common.risk_control_level') }}：</span>
					<span>
						{{
							showInfoData.windControlName
								? showInfoData.windControlName
								: $t('common.components.no')
						}}
					</span>
				</el-col>
			</el-row>
			<el-row class="info-content-row">
				<el-col :span="24">
					<span>{{ $t('common.components.reason') }}：</span>
					<span>
						{{
							showInfoData.windReason
								? showInfoData.windReason
								: $t('common.components.no')
						}}
					</span>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Virtual',
	props: {
		showInfoData: {
			type: Object,
			default: () => {}
		}
	}
}
</script>
<style lang="scss" scoped>
.info-header {
	border-top: 1px rgba(233, 233, 233, 1) solid;
	span {
		margin-top: 45px;
		display: inline-block;
		width: 188px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #000;
		color: rgb(255, 255, 255);
	}
}
.info-content {
	margin-top: 30px;
	font-size: 14px;
	.info-content-row {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
</style>
